<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024/7/10 下午1:17
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024/7/10 下午1:17
 * @FilePath: G:/chain-link-api-front-admin/src/views/system/banner\index2.vue
 * @Description: Description
-->
<template>
  <el-table :data="tableData" stripe border style="width: 100%; " size="large" v-loading="loading" max-height="600px">
    <el-table-column prop="chainName" :label="$t('banner.BannerName')" width="180" align="center" />
    <el-table-column prop="feeAddress" :label="$t('banner.BannerUrl')" width="auto" align="center" />
    <el-table-column prop="collectAddress" :label="$t('banner.BannerView')" width="auto" align="center" >
      <template #default="scope">
        <el-image
            style="width: 100px; height: 100px; z-index:9999"
            :src="url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcList"
            :initial-index="4"
            fit="cover"
            preview-teleported
        />
      </template>
    </el-table-column>
    <el-table-column fixed="right" :label="$t('global.Operation')" width="150" align="center">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope)" >{{ $t('global.Update') }}</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(scope)" >{{ $t('global.Delete') }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted, unref, reactive, watch } from 'vue'
import {Delete, Edit, Plus, Refresh, Search, Upload, UploadFilled} from "@element-plus/icons-vue";
import {formatTimestamp} from "@/utils/timeStamp";
import queryBar from "@/components/queryBar/index.vue"
import {ElMessage, ElMessageBox, ElTable} from "element-plus";
import {getPrivateKeyList, createPrivateKey, updatePrivateKey, getConfigList, deletePrivateKey} from "@/require/api.js"
import {useI18n} from "vue-i18n";
const { t } = useI18n();

onMounted(()=>{
  getList()
})
const loading =ref(false)
const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
/***********************************      文件上传 start     *********************************/
const url = ref('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')
const srcList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])
// 图片list
const fileList = ref([])
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
      `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
      } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
      `${t('message.CancelUpload')} ${uploadFile.name} ?`
  ).then(
      () => true,
      () => false
  )
}

/***********************************      文件上传 end     *********************************/

// 获取资产列表
async function getList(chainName, feeAddress, collectAddress) {
  try {
    loading.value = true
    const { code, data, msg } = await getPrivateKeyList({
      pageIndex: unref(pageIndex),
      pageSize: unref(pageSize),
      chainName: chainName ? chainName : '' ,
      feeAddress: feeAddress ? feeAddress : '' ,
      collectAddress: collectAddress ? collectAddress : ''
    })
    if (code === 200) {
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    console.log(error)
  } finally{
    loading.value = false
  }
}
</script>

<style scoped lang="less">

</style>